<template>
  <section>
    <el-row style="display: flex;align-items: center;">
      <el-col :span="6">
        <el-input size="mini" placeholder="请输入关键字"  clearable v-model="searchKey" @keydown.native.prevent.enter="searchBtn" ></el-input>
      </el-col>
      <el-col :span="4">
        <i class="el-icon-search" @click="searchBtn" style="margin-left:10px" ></i>
      </el-col>
      <el-col :span="12" >
        <el-button size="mini" @click="addDisease" style="float: right" type="primary">新建疾病</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="diseaseList" stripe v-loading="loading">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="描述：">
                <el-input v-show="props.row.edit" size="small" v-model="props.row.description"></el-input>
                <span v-show="!props.row.edit">{{props.row.description}}</span>
              </el-form-item>
              <el-form-item label="method方法：">
                <el-button @click="treatmentScheme(props.row)" :disabled="!props.row.edit" size="mini">处理方法</el-button>
              </el-form-item>
              <el-form-item label="对症的：">
                <el-button @click="set(props)"  size="mini" :disabled="!props.row.edit">设置</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号"  width="100px"></el-table-column>
        <el-table-column prop="name" label="名称" width="250px">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="编码" >
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.code"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.code}}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情" >
          <template slot-scope="scope">
            <el-button size="mini" @click="setDetail(scope.row)">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='cancelBtn(scope.row)' size="small" v-if="scope.row.edit">取消</el-button>
            <el-button @click='del(scope)' size="small" v-if="!scope.row.edit">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="totalPage>0" style="margin-top:20px;"
                     background
                     layout="prev, pager, next"
                     :page-count="totalPage"
                     @current-change="goPage">
      </el-pagination>
    </el-row>
    <el-row>
      <el-dialog  :visible.sync="showSetDetail" width="80%">
        <set-detail :disease="currDisease"></set-detail>
      </el-dialog>
      <el-dialog  :visible.sync="showSet">
        <set-food :currDisease="currDisease"></set-food>
      </el-dialog>
      <el-dialog  :visible.sync="showTreatmentScheme" v-if="currRow">
        <el-row>
          <el-button size="mini" @click="addMethod(currRow.items)">添加症见</el-button>
        </el-row>
        <div style="display: flex;flex-direction: row">
          <el-card style="width: 300px;margin-right:20px" v-for="(item,index) in currRow.items" :key="index">
            <div slot="header" class="clearfix">
              <el-row>
                <el-col :span="19">{{item[0].val}}</el-col>
                <el-col :span="5"><el-button style="float: right; padding: 3px 0" type="text" @click="addItemMethod(item)">添加方法</el-button></el-col>
              </el-row>
            </div>
            <div v-for="(i,index2) in item" :key="index2" class="text item">
              <div v-if="i.key !=='edit'">
                <el-row v-if="i.key === '症见'">
                  <el-col :span="7"> {{i.key}} </el-col>
                  <el-col :span="15"> <el-input v-model="i.val" size="mini"></el-input> </el-col>
                </el-row>

                <el-row v-if="i.key !== '症见' && i.key !=='edit'">
                  <el-col :span="7">
                    <el-input v-model="i.key" size="mini"></el-input>
                  </el-col>
                  <el-col :span="15">
                    <div v-for="(v,vIndex) in i.val" :key="vIndex">
                      <el-input size="mini" v-model="i.val[vIndex]" placeholder="请输入内容"></el-input>
                    </div>
                    <i class="el-icon-plus" @click="addItemMethodDetail(i)"></i>
                  </el-col>
                </el-row>
              </div>
              <div v-if="i.key ==='edit'">
                <el-row >
                  <el-col :span="7"> 操作 </el-col>
                  <el-col :span="15">
                    <el-button type="text" v-if="i.val" @click="i.val = !i.val" size="mini">完成</el-button>
                    <el-button type="text" v-if="!i.val" @click="i.val = !i.val" size="mini">编辑</el-button>
                    <el-button type="text" v-if="!i.val" style="color:red" @click="currRow.items.splice(index,1)" size="mini">删除</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </div>
        <el-row>
          <el-button size="mini" @click="saveCurrRowItems(currRow)" type="primary">保存</el-button>
        </el-row>
      </el-dialog>
    </el-row>
  </section>

</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import setFood from  './setFoodMedicine'
  import setDetail from  './diseaseDetail'
  export default {
    name: "disease",
    components: {setFood,setDetail},
    data() {
      return {
        currRow:null,
        currItems:null,
        showSet:false,
        showSetDetail:false,
        diseaseList:[],
        totalPage:0,
        loading:false,
        searchKey:null,
        foodList:null,
        medicineList:null,
        currDisease:{},
        showTreatmentScheme:false
      }
    },
    created(){
      this.getDiseaseList()
    },
    computed:{
    },
    watch: {
      searchKey(nv,ov){
        if(nv === ''){
          this.getDiseaseList()
        }
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      setDetail(row){
        this.currDisease=null
        this.currDisease=row
        this.showSetDetail=true
      },
      set(props){
        this.currDisease=props.row
        this.showSet=true
      },
      searchBtn(){
        this.getDiseaseList('',this.searchKey)
      },
      goPage(val){
        this.getDiseaseList(val-1)
      },
      getDiseaseList(pageNo,key){
        this.fetch({name:"getDiseaseList",data:{page:pageNo?pageNo:0,key:key?key:''}})
          .then(res=>{
            console.log(res)
            this.diseaseList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addDisease(){
        //新建一个空的Disease，表格页面+1栏
        this.fetch({name:"createDisease",data:{name:'',description:''}})
          .then(res=>{
            console.log(res)
            res.edit = true
            this.diseaseList.unshift(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        console.log(row)
        if(row.edit === undefined){
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          return
        }
        if(row.edit){
          this.loading=true
          this.updateDisease(row)
        }else {
          row.edit=true
        }
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delDisease",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.diseaseList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      updateDisease(row){
        console.log(row)
        this.fetch({name:"updateDisease",data:{...row}})
          .then(res=>{
            this.loading=false
            console.log(res)
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      treatmentScheme(row){
        console.log(row)
        if(!row.method){
          console.log('没有method哦~')
          Vue.set(row,'items',[[{key:'症见',val:''},{key:'edit',val:true}]])
          // row.items=[[{key:'',val:''}]]
        }else {
          let tmp = JSON.parse(row.method)
          Vue.set(row,'items',tmp)
          // row.items=
        }
        this.currRow = row
        this.showTreatmentScheme=true
      },
      saveCurrRowItems(row){
        console.log(row)
        row.method=JSON.stringify(row.items)
        this.showTreatmentScheme=false
      },
      addMethod(items){
        items.push([{key:'症见',val:''},{key:'edit',val:true}])
        console.log(this.currRow.items)
      },
      addItemMethod(item){
        console.log(item)
        item.splice(item.length-1,0,{key:'',val:['']})
      },
      addItemMethodDetail(i){
        console.log(i)
        i.val.push('')
      }
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
